<template>
  <div class="hostGoodsManage flexRSS">
    <!--门店左边-->
    <div class="hostGoodsManage-lf">
      <ShopListMenu @emitShopId="emitShopId" />
    </div>
    <!--右边-->
    <div class="hostGoodsManage-rt app-main-content-box">
      <!--资源详情-->
      <div class="source-style flexRBS">
        <div class="shop-facility-title">{{ shopName }}</div>
        <el-button
          v-if="!$store.getters.banBtnList.includes('BTN_DEPOSIT_WAREHOUSE_ADD')"
          type="primary"
          size="medium"
          round
          @click="addCategory"
        >新增仓库</el-button>
      </div>
      <!--table-->
      <div class="list-table">
        <el-table
          v-loading="tableLoading"
          :data="list"
          border
          stripe
          style="width: 100%"
          empty-text="暂无数据"
        >
          <el-table-column prop="name" label="仓库名称" min-width="150px" />
          <el-table-column prop="remark" label="备注" min-width="150px" />
          <el-table-column label="操作" align="center" width="150px" fixed="right">
            <template slot-scope="scope">
              <el-button
                v-if="!$store.getters.banBtnList.includes('BTN_DEPOSIT_WAREHOUSE_EDIT')"
                size="small"
                type="text"
                @click="editBtn(scope.row)"
              >编辑</el-button>
              <!-- <span class="split-color"> | </span> -->
              <el-button
                v-if="!$store.getters.banBtnList.includes('BTN_DEPOSIT_WAREHOUSE_DELETE')"
                type="text"
                size="small"
                @click="listItemDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!-- <pagination-direction
          v-if="paginationConfig.total!==0"
          :config="paginationConfig"
          @sizeschange="sizesChange"
          @pagechange="pageChange"
        ></pagination-direction> -->
      </div>
    </div>
    <DialogInput ref="DialogInput" @emitDialogSave="emitDialogSave" />
  </div>
</template>

<script>
import BaseSetting from './components/BaseSetting.vue'
import BillSetting from './components/BillSetting.vue'
import DialogInput from './components/hostWarehouseManageDialog/hostWarehouseManageDialog.vue'
export default {
  components: {
    BaseSetting,
    BillSetting,
    DialogInput
  },
  data() {
    return {
      // 配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 1,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      tableLoading: false, // 表格loading
      searchLoading: false, // 搜索btn loading
      // 数据
      shopId: 1,
      shopName: '',
      list: [], // 表格数据
      filterForm: {
        // 筛选数据
        name: '',
        serial: ''
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    /* 数据请求*/
    // 获取门店数据
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 加入page
      this.filterForm.pageNum = page
      this.filterForm.pageSize = pageSize
      const params = Object.assign({ shopId: this.shopId }, this.filterForm)
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      const data = params
      console.log(data)
      this.tableLoading = true
      this.khReqMethod({
        url: '/depositAdmin/config/warehouse',
        data,
        method: 'get',
        isParams: true
      }).then(res => {
        this.tableLoading = false
        this.searchLoading = false
        this.list = res.data
        // this.paginationConfig.total = res.data.total;
        // this.paginationConfig.page = res.data.pageNum;
      })
    },
    /* 按钮点击*/
    addCategory() {
      const parentData = {
        dialogTitle: '新增仓库'
      }
      this.$refs.DialogInput.dialogShow(parentData)
    },
    editBtn(row) {
      const parentData = {
        dialogTitle: '编辑分类',
        rowItem: JSON.parse(JSON.stringify(row))
      }
      this.$refs.DialogInput.dialogShow(parentData)
    },
    listItemDelete(row) {
      // 删除
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteWarehouse(row)
      })
    },
    /* other*/
    emitShopId(item) {
      this.shopId = item.shopId
      this.shopName = item.shopName
      this.initData()
    },
    /* other*/
    emitDialogSave(pageForm) {
      this.postWarehouse(pageForm)
      console.log(pageForm)
    },

    // 添加仓库
    postWarehouse(pageForm) {
      const data = Object.assign({ shopId: this.shopId }, pageForm)
      console.log(pageForm)
      this.khReqMethod({
        url: '/depositAdmin/config/warehouse',
        data,
        method: 'post',
        isLoading: true
      }).then(res => {
        if (res.code === 0) {
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
          this.initData()
        }
      })
    },
    // 删除商品
    deleteWarehouse(row) {
      const data = {
        id: row.id,
        shopId: this.shopId
      }
      console.log(data)
      this.khReqMethod({
        url: '/depositAdmin/config/warehouse',
        data,
        method: 'delete',
        isLoading: true,
        isParams: true
      }).then(res => {
        if (res.code === 0) {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
          this.initData()
        }
      })
    },
    /* 控制显示的隐藏*/
    /* 分页*/
    sizesChange() {
      this.initData()
    },
    pageChange() {
      this.initData()
    }
  }
}
</script>

<style scoped lang="scss">
  .hostGoodsManage-rt {
    width: 100%;
    .source-style {
      margin-bottom: 16px;
      .shop-facility-title {
        font-size: 18px;
      }
    }
  }
  .content-tab {
    padding: 0 10px;
    margin-top: 5px;
    background-color: #fff;
  }
</style>
